<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<template>
    <el-menu router active-text-background-color="#ffd04b" background-color="#121e41" class="el-menu-vertical-demo"
        default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
        <el-menu-item class="img">
            <img src="https://heimahr.itheima.net/static/img/logo.2201adab.png" alt="">
        </el-menu-item>
        <el-menu-item index="/Home">
            <svg-icon name="huaban" width="20px" height="20px"></svg-icon>
            <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/Plan">
            <svg-icon name="zuzhi" width="20px" height="20px"></svg-icon>
            <span>组织</span>
        </el-menu-item>
        <el-menu-item index="/Role">
            <svg-icon name="renlishebao" width="20px" height="20px"></svg-icon>
            <span>角色</span>
        </el-menu-item>
        <el-sub-menu index="/Staff">
            <template #title>
                <svg-icon name="yuangong" width="20px" height="20px"></svg-icon>
                <span>员工</span>
            </template>
            <el-menu-item index="/Staff">员工列表</el-menu-item>
            <el-menu-item index="/Staff/Addstaff">添加员工</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/Authority">
            <svg-icon name="suo" width="20px" height="20px"></svg-icon>
            <span>权限</span>
        </el-menu-item>
        <el-menu-item index="/Attendance">
            <svg-icon name="six" width="20px" height="20px"></svg-icon>
            <span>考勤</span>
        </el-menu-item>
        <el-menu-item index="/Approval">
            <svg-icon name="shenpiliu" width="20px" height="20px"></svg-icon>
            <span>审批</span>
        </el-menu-item>
        <el-menu-item index="/Wages">
            <svg-icon name="nine" width="20px" height="20px"></svg-icon>
            <span>工资</span>
        </el-menu-item>
        <el-menu-item index="/Social">
            <svg-icon name="shebaorenzheng" width="20px" height="20px"></svg-icon>
            <span>社保</span>
        </el-menu-item>
    </el-menu>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.aside {
    /* width: 200px; */
    height: 95vh;
    background-color: #121e41;

}

.el-header {
    background-color: #B3C0D1;
    color: var(--el-text-color-primary);
    line-height: 60px;
    text-align: center;
}

.el-aside {
    color: var(--el-text-color-primary);
}

.img img {
    width: 160px;
}</style>
